import React, { Component } from 'react'
import { Button,Checkbox } from 'antd';
import css from './index.module.css'

export default class Footer extends Component {
  
  render() {
    const { todoList, onClearAllFinished, onChangeAllCheck } = this.props

    const totalCount = todoList.length;
    const finishedCount = todoList.reduce((pre, curr) => curr.isFinished ? pre + 1 : pre, 0)
    const isAllChecked = totalCount === finishedCount && totalCount !== 0;

    return (
      <div className={css.container}>
        <div className={css.leftWrap}>
          <Checkbox checked={isAllChecked} onChange={() => onChangeAllCheck(isAllChecked)}></Checkbox>
          <span className={css.checkboxText}>已完成{finishedCount}个 / 总计{totalCount}个</span>
        </div>
        <Button danger disabled={finishedCount === 0} onClick={onClearAllFinished}>清空所有已完成任务</Button>
      </div>
    )
  }
}
